<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>浏览器定位</title>
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
		<link rel="stylesheet" type="text/css" href="css/position.css" />
		<style type="text/css">
			.info {
				border: solid 1px silver;
			}
			
			div.info-top {
				position: relative;
				background: none repeat scroll 0 0 #F9F9F9;
				border-bottom: 1px solid #CCC;
				border-radius: 5px 5px 0 0;
			}
			
			div.info-top div {
				display: inline-block;
				color: #333333;
				font-size: 14px;
				font-weight: bold;
				line-height: 31px;
				padding: 0 10px;
			}
			
			div.info-top img {
				position: absolute;
				top: 10px;
				right: 10px;
				transition-duration: 0.25s;
			}
			
			div.info-top img:hover {
				box-shadow: 0px 0px 5px #000;
			}
			
			div.info-middle {
				font-size: 12px;
				padding: 6px;
				line-height: 20px;
			}
			
			div.info-bottom {
				height: 0px;
				width: 100%;
				clear: both;
				text-align: center;
			}
			
			div.info-bottom img {
				position: relative;
				z-index: 104;
			}
			
			span {
				margin-left: 5px;
				font-size: 11px;
			}
			
			.info-middle img {
				float: left;
				margin-right: 6px;
			}
			
			.amap-zoomcontrol {
				display: none;
			}
		</style>
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=966a903045fed84e232eeec5953a5f88"></script>
		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="posweb">
			<div class="map">
				<div id='container'></div>
				<div id="tip" style="display: none;"></div>
			</div>
			<div class="position_img">
				<img src="img/position/pos_img_03.png" />
			</div>
			<div class="footer">
				<div class="home_img">
					<a href="index.html">
						<img src="img/activity_Rules/home.png" />
					</a>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var map, geolocation;
			//加载地图，调用浏览器定位服务
			map = new AMap.Map('container', {
				resizeEnable: true
			});
			map.plugin('AMap.Geolocation', function() {
				geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：无穷大
					buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					//					buttonPosition: 'RB'
				});
				//				map.addControl(geolocation);  
				geolocation.getCurrentPosition();
				AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
				AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
			});
			//解析定位结果
			function onComplete(data) {
				var str = ['定位成功'];
				str.push('经度：' + data.position.getLng());
				str.push('纬度：' + data.position.getLat());
				var jd = data.position.getLng();
				var wd = data.position.getLat();
				if(data.accuracy) {
					str.push('精度：' + data.accuracy + ' 米');
				} //如为IP精确定位结果则没有精度信息
				str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
				document.getElementById('tip').innerHTML = str.join('<br>');
				$.ajax({
					method: "get",
					url: "js/data.json",
					async: true,
					success: function(res) {
						var sb = 1000000;
						var index;
						for(var i = 0; i < res.length; i++) {
							var cur = Math.sqrt((Math.pow(jd - res[i].JD), 2) + (Math.pow(wd - res[i].WD), 2));
							if(cur < sb) {
								sb = cur;
								index = i;
							}
						}
						var jj = res[index].JD;
						var ww = res[index].WD;
						var name = res[index].shop_name;
						var phone = res[index].mobile;
						var ads = res[index].address;
						//自定义窗体
						//地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体
						var map = new AMap.Map("container", {
							resizeEnable: true,
							center: [jj, ww],
							zoom: 16

						});
						addMarker();
						//添加marker标记
						function addMarker() {
							map.clearMap();
							var marker = new AMap.Marker({
								map: map,
								position: [jj, ww]
							});
							//鼠标点击marker弹出自定义的信息窗体
							AMap.event.addListener(marker, 'click', function() {
								infoWindow.open(map, marker.getPosition());
							});
						}
						//实例化信息窗体
						var title = '<span style="font-size:11px;color:#2975e0;">' + name + '</span>',
							content = [];
						content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：" + ads + "");
						content.push("电话：" + phone + "");
						content.push("<a href='http://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
						var infoWindow = new AMap.InfoWindow({
							isCustom: true, //使用自定义窗体
							content: createInfoWindow(title, content.join("<br/>")),
							offset: new AMap.Pixel(16, -45)
						});
						//自动弹出信息窗体
						infoWindow.open(map, [jj, ww]);
						//构建自定义信息窗体
						function createInfoWindow(title, content) {
							var info = document.createElement("div");
							info.className = "info";
							//可以通过下面的方式修改自定义窗体的宽高
							//info.style.width = "400px";
							// 定义顶部标题
							var top = document.createElement("div");
							var titleD = document.createElement("div");
							var closeX = document.createElement("img");
							top.className = "info-top";
							titleD.innerHTML = title;
							closeX.src = "http://webapi.amap.com/images/close2.gif";
							closeX.onclick = closeInfoWindow;

							top.appendChild(titleD);
							top.appendChild(closeX);
							info.appendChild(top);

							// 定义中部内容
							var middle = document.createElement("div");
							middle.className = "info-middle";
							middle.style.backgroundColor = 'white';
							middle.innerHTML = content;
							info.appendChild(middle);

							// 定义底部内容
							var bottom = document.createElement("div");
							bottom.className = "info-bottom";
							bottom.style.position = 'relative';
							bottom.style.top = '0px';
							bottom.style.margin = '0 auto';
							var sharp = document.createElement("img");
							sharp.src = "http://webapi.amap.com/images/sharp.png";
							bottom.appendChild(sharp);
							info.appendChild(bottom);
							return info;
						}
						//关闭信息窗体
						function closeInfoWindow() {
							map.clearInfoWindow();
						}
					}
				})
			}
			//解析定位错误信息
			function onError(data) {
				document.getElementById('tip').innerHTML = '定位失败';
			}
			$(".footer .home_img").on("click",function(){
				location.href = "index.html";
			})
		</script>
	</body>

</html>